<template>
    <el-container class="content">
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-input v-model="name" placeholder="请输入网点名" class="input"
                                      size="small"></el-input>
                            <el-button class="primary" @click="getList" size="small">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                            <el-button @click="dataExport()" size="small">导出</el-button>
                        </div>
                        <div class="text-right">
                            <el-button type="primary" @click="add()" size="small" v-if="user&&!user.storeCode">新增</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example ref="table" :data="tableData" :tableColumn="header" :stripe="true"
                                   :slotColumns="slotColumns">
                        <template slot="address" slot-scope="scope">
                            {{scope.row.areaName || ''}}{{scope.row.address || ''}}
                        </template>
                        <template slot="appointTime" slot-scope="scope">
                            {{scope.row.week || ''}} {{scope.row.weekTime || ''}}
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <el-link :underline="false" type="primary" @click="look(scope.row.id)">修改
                            </el-link>
                            <el-link :underline="false" type="primary"
                                     @click="changeState(scope.row.id,scope.row.storeStatus)">
                                {{scope.row.storeStatus==1 ? '禁用' : '启用'}}
                            </el-link>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" v-if="page" class="mt30 page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <transition>
                <router-view @upload="getList"></router-view>
            </transition>
        </el-main>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import qs from 'qs'
    import {mapGetters} from 'vuex'

    export default {
        data() {
            return {
                name: '', // 姓名
                tableData: [],
                header: [
                    {
                        prop: 'name',
                        label: '网点名称',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'address',
                        label: '网点地址',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'contacts',
                        label: '联系人',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'contactsPhone',
                        label: '联系方式',
                        minWidth: '110',
                        align: 'center'
                    },
                    {
                        prop: 'kzCount',
                        label: '剩余',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'allCount',
                        label: '存货',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'appointTime',
                        label: '可取时间',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '100'
                    }
                ],
                slotColumns: ['operation', 'address', 'appointTime'],
                page: {},
                index: 1,
                loading: false
            }
        },
        mounted() {
            this.getList()
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/storeManage/getStoreManagePage', {
                    current: this.index || 1,
                    size: 15,
                    name: this.name
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            reset() {
                this.name = ''
                this.getList()
            },
            add() {
                this.$router.push(this.$route.path + '/add')
            },
            look(id) {
                this.$router.push({
                    path: this.$route.path + '/detail',
                    // path: '/monitor/branch-details',
                    query: {
                        id: id
                    }
                })
            },
            changeState(id, state) {
                let message = '是否禁用该网点', _this = this
                if (state === 2) message = '是否启用该网点'
                this.$method.messageBox('confirm', message, (action, instance) => {
                    if (action === 'confirm') {
                        _this.loading = true
                        _this.$http.post('/storeManage/delStorManage', {
                            id: id,
                            state: state
                        }).then(result => {
                            _this.loading = false
                            if (result.success) {
                                _this.getList()
                                _this.$message({
                                    type: 'success',
                                    message: '状态修改成功!'
                                })
                            }
                        })
                    }
                }, '', false, false)
            },
            dataExport() {
                let params = {
                    name: this.name
                }, url = '/_api/storeManage/downLodeStoreManage'
                url += '?' + qs.stringify(params)
                window.open(location.origin + url, '_blank')
            }
        },
        components: {
            tableExample,
            page
        }
    }
</script>

<style scoped lang="less">

</style>
